<template>
  <section id="pricing" class="observe">
    <div class="container">
      <h2 data-i18n="sec_pricing">价格方案</h2>
      <p class="subtitle" data-i18n="sec_pricing_desc">灵活选择，按需付费</p>
      
      <div class="pricing-toggle">
        <span :class="{ active: !isYearly }" data-i18n="pricing_monthly">月付</span>
        <div class="toggle" @click="togglePricing">
          <div class="toggle-slider" :class="{ yearly: isYearly }"></div>
        </div>
        <span :class="{ active: isYearly }" data-i18n="pricing_yearly">年付</span>
        <div class="discount" data-i18n="pricing_discount">省 20%</div>
      </div>
      
      <div class="pricing-grid">
        <!-- 入门版 -->
        <div class="pricing-card">
          <div class="pricing-header">
            <h3 data-i18n="plan_starter">入门版</h3>
            <p data-i18n="plan_starter_desc">个人创作者的理想选择</p>
          </div>
          
          <div class="price">
            <span class="currency">¥</span>
            <span class="amount">{{ isYearly ? '99' : '12' }}</span>
            <span class="period" data-i18n="pricing_period">{{ isYearly ? '/年' : '/月' }}</span>
          </div>
          
          <div class="features">
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_videos">每月 10 个视频</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_templates_basic">基础模板库</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_720p">720p 导出</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_watermark">带水印</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_support_email">邮件支持</div>
            </div>
          </div>
          
          <button class="btn-outline" data-i18n="btn_starter">开始免费试用</button>
        </div>
        
        <!-- 专业版 -->
        <div class="pricing-card popular">
          <div class="popular-badge" data-i18n="popular_badge">最受欢迎</div>
          <div class="pricing-header">
            <h3 data-i18n="plan_pro">专业版</h3>
            <p data-i18n="plan_pro_desc">内容创业者的最佳选择</p>
          </div>
          
          <div class="price">
            <span class="currency">¥</span>
            <span class="amount">{{ isYearly ? '799' : '99' }}</span>
            <span class="period" data-i18n="pricing_period">{{ isYearly ? '/年' : '/月' }}</span>
          </div>
          
          <div class="features">
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_videos_unlimited">无限视频</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_templates_all">全部模板库</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_4k">4K 导出</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_no_watermark">无水印</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_support_priority">优先支持</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_custom_fonts">自定义字体</div>
            </div>
          </div>
          
          <button class="btn-primary" data-i18n="btn_pro">选择专业版</button>
        </div>
        
        <!-- 企业版 -->
        <div class="pricing-card">
          <div class="pricing-header">
            <h3 data-i18n="plan_enterprise">企业版</h3>
            <p data-i18n="plan_enterprise_desc">团队协作的完美解决方案</p>
          </div>
          
          <div class="price">
            <span class="contact" data-i18n="pricing_contact">联系我们</span>
          </div>
          
          <div class="features">
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_team_members">多团队成员</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_templates_custom">定制模板</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_api_access">API 访问</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_brand_kit">品牌资产库</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_support_dedicated">专属客户经理</div>
            </div>
            <div class="feature">
              <div class="feature-icon">✓</div>
              <div class="feature-text" data-i18n="feature_analytics">高级数据分析</div>
            </div>
          </div>
          
          <button class="btn-outline" data-i18n="btn_enterprise">联系销售</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 价格切换状态
const isYearly = ref(false);

// 切换价格方案（月/年）
const togglePricing = () => {
  isYearly.value = !isYearly.value;
};

// 国际化字典
const i18n = {
  zh: {
    sec_pricing: '价格方案',
    sec_pricing_desc: '灵活选择，按需付费',
    pricing_monthly: '月付',
    pricing_yearly: '年付',
    pricing_discount: '省 20%',
    pricing_period: (isYearly) => isYearly ? '/年' : '/月',
    pricing_contact: '联系我们',
    plan_starter: '入门版',
    plan_starter_desc: '个人创作者的理想选择',
    plan_pro: '专业版',
    plan_pro_desc: '内容创业者的最佳选择',
    plan_enterprise: '企业版',
    plan_enterprise_desc: '团队协作的完美解决方案',
    popular_badge: '最受欢迎',
    feature_videos: '每月 10 个视频',
    feature_videos_unlimited: '无限视频',
    feature_templates_basic: '基础模板库',
    feature_templates_all: '全部模板库',
    feature_templates_custom: '定制模板',
    feature_720p: '720p 导出',
    feature_4k: '4K 导出',
    feature_watermark: '带水印',
    feature_no_watermark: '无水印',
    feature_support_email: '邮件支持',
    feature_support_priority: '优先支持',
    feature_support_dedicated: '专属客户经理',
    feature_custom_fonts: '自定义字体',
    feature_team_members: '多团队成员',
    feature_api_access: 'API 访问',
    feature_brand_kit: '品牌资产库',
    feature_analytics: '高级数据分析',
    btn_starter: '开始免费试用',
    btn_pro: '选择专业版',
    btn_enterprise: '联系销售'
  },
  en: {
    sec_pricing: 'Pricing Plans',
    sec_pricing_desc: 'Flexible options, pay as you go',
    pricing_monthly: 'Monthly',
    pricing_yearly: 'Yearly',
    pricing_discount: 'Save 20%',
    pricing_period: (isYearly) => isYearly ? '/year' : '/month',
    pricing_contact: 'Contact Us',
    plan_starter: 'Starter',
    plan_starter_desc: 'Perfect for individual creators',
    plan_pro: 'Professional',
    plan_pro_desc: 'Best for content entrepreneurs',
    plan_enterprise: 'Enterprise',
    plan_enterprise_desc: 'Complete solution for teams',
    popular_badge: 'Most Popular',
    feature_videos: '10 videos per month',
    feature_videos_unlimited: 'Unlimited videos',
    feature_templates_basic: 'Basic template library',
    feature_templates_all: 'All templates',
    feature_templates_custom: 'Custom templates',
    feature_720p: '720p export',
    feature_4k: '4K export',
    feature_watermark: 'With watermark',
    feature_no_watermark: 'No watermark',
    feature_support_email: 'Email support',
    feature_support_priority: 'Priority support',
    feature_support_dedicated: 'Dedicated manager',
    feature_custom_fonts: 'Custom fonts',
    feature_team_members: 'Multiple team members',
    feature_api_access: 'API access',
    feature_brand_kit: 'Brand kit',
    feature_analytics: 'Advanced analytics',
    btn_starter: 'Start Free Trial',
    btn_pro: 'Choose Pro',
    btn_enterprise: 'Contact Sales'
  },
  es: {
    sec_pricing: 'Planes de Precios',
    sec_pricing_desc: 'Opciones flexibles, pague según use',
    pricing_monthly: 'Mensual',
    pricing_yearly: 'Anual',
    pricing_discount: 'Ahorre 20%',
    pricing_period: (isYearly) => isYearly ? '/año' : '/mes',
    pricing_contact: 'Contáctenos',
    plan_starter: 'Inicial',
    plan_starter_desc: 'Perfecto para creadores individuales',
    plan_pro: 'Profesional',
    plan_pro_desc: 'Ideal para emprendedores de contenido',
    plan_enterprise: 'Empresarial',
    plan_enterprise_desc: 'Solución completa para equipos',
    popular_badge: 'Más Popular',
    feature_videos: '10 videos por mes',
    feature_videos_unlimited: 'Videos ilimitados',
    feature_templates_basic: 'Biblioteca básica',
    feature_templates_all: 'Todas las plantillas',
    feature_templates_custom: 'Plantillas personalizadas',
    feature_720p: 'Exportación 720p',
    feature_4k: 'Exportación 4K',
    feature_watermark: 'Con marca de agua',
    feature_no_watermark: 'Sin marca de agua',
    feature_support_email: 'Soporte por email',
    feature_support_priority: 'Soporte prioritario',
    feature_support_dedicated: 'Gerente dedicado',
    feature_custom_fonts: 'Fuentes personalizadas',
    feature_team_members: 'Múltiples miembros',
    feature_api_access: 'Acceso API',
    feature_brand_kit: 'Kit de marca',
    feature_analytics: 'Análisis avanzado',
    btn_starter: 'Prueba Gratuita',
    btn_pro: 'Elegir Pro',
    btn_enterprise: 'Contactar Ventas'
  }
};

// 应用语言
const applyLang = (lang) => {
  const dict = i18n[lang];
  if (!dict) return;
  
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.dataset.i18n;
    if (dict[key]) {
      if (typeof dict[key] === 'function') {
        el.innerHTML = dict[key](isYearly.value);
      } else {
        el.innerHTML = dict[key];
      }
    }
  });
};

// 生命周期钩子
onMounted(() => {
  // 初始化语言
  const savedLang = localStorage.getItem('lang') || 'zh';
  applyLang(savedLang);
  
  // 监听语言变化
  window.addEventListener('storage', (e) => {
    if (e.key === 'lang') {
      applyLang(e.newValue);
    }
  });
  
  // 设置观察器，当元素进入视口时添加reveal类
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('reveal');
      }
    });
  }, { threshold: 0.12 });
  
  document.querySelectorAll('.observe .pricing-card').forEach(el => {
    observer.observe(el);
  });
});
</script>

<style scoped>
/* 价格方案区域样式 */
#pricing {
  padding: 80px 0;
}

h2 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 16px;
}

.subtitle {
  text-align: center;
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  gap: 12px;
}

.pricing-toggle span {
  font-size: 16px;
  color: var(--text-muted);
  transition: all 0.3s ease;
}

.pricing-toggle span.active {
  color: var(--text);
  font-weight: 600;
}

.toggle {
  width: 50px;
  height: 26px;
  background: var(--toggle-bg);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-slider {
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: all 0.3s ease;
}

.toggle-slider.yearly {
  left: 27px;
}

.discount {
  padding: 4px 8px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.pricing-card {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(20px);
}

.pricing-card.reveal {
  opacity: 1;
  transform: translateY(0);
}

.pricing-card:nth-child(2) {
  transition-delay: 0.2s;
}

.pricing-card:nth-child(3) {
  transition-delay: 0.4s;
}

.pricing-card.popular {
  border: 2px solid var(--primary);
  transform: scale(1.05);
  z-index: 1;
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.pricing-header {
  text-align: center;
  margin-bottom: 24px;
}

.pricing-header h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.pricing-header p {
  font-size: 14px;
  color: var(--text-muted);
}

.price {
  text-align: center;
  margin-bottom: 30px;
}

.currency {
  font-size: 24px;
  font-weight: 600;
  vertical-align: top;
  margin-right: 4px;
}

.amount {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.period {
  font-size: 16px;
  color: var(--text-muted);
  margin-left: 4px;
}

.contact {
  font-size: 24px;
  font-weight: 600;
}

.features {
  margin-bottom: 30px;
}

.feature {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.feature-icon {
  width: 20px;
  height: 20px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 12px;
  flex-shrink: 0;
}

.feature-text {
  font-size: 15px;
}

button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary-light);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .pricing-card.popular {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .pricing-card:nth-child(3) {
    grid-column: span 2;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  
  .pricing-card {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .pricing-card.popular {
    grid-column: auto;
    transform: scale(1);
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .pricing-card:nth-child(3) {
    grid-column: auto;
  }
  
  h2 {
    font-size: 30px;
  }
  
  .subtitle {
    font-size: 16px;
    margin-bottom: 30px;
  }
}
</style>